From ec888b9bec997456368d03579e569929f3745307 Mon Sep 17 00:00:00 2001 From: real-zephex Date: Thu, 18 Apr 2024 21:43:02 +0530 Subject: feature added: tracker for mangas --- .../manga/[title]/[id]/[read]/currentReading.jsx | 39 +++++++++++++--------- src/app/manga/[title]/[id]/[read]/download.jsx | 12 ++++--- src/app/manga/[title]/[id]/[read]/page.jsx | 3 -- src/app/manga/[title]/[id]/[read]/read.module.css | 13 ++------ src/app/manga/[title]/[id]/buttons.jsx | 31 ++++++++++++----- src/app/manga/[title]/[id]/info.module.css | 16 +++++---- src/app/manga/[title]/[id]/page.jsx | 6 +--- src/app/manga/[title]/page.jsx | 5 ++- src/app/manga/[title]/title.module.css | 11 ++++-- 9 files changed, 80 insertions(+), 56 deletions(-) (limited to 'src/app/manga/[title]') diff --git a/src/app/manga/[title]/[id]/[read]/currentReading.jsx b/src/app/manga/[title]/[id]/[read]/currentReading.jsx index 2db6d77..0050d61 100644 --- a/src/app/manga/[title]/[id]/[read]/currentReading.jsx +++ b/src/app/manga/[title]/[id]/[read]/currentReading.jsx @@ -1,27 +1,34 @@ "use client"; -import { useState, useEffect } from "react"; + import styles from "./read.module.css"; +import { useEffect } from "react"; -export default function CurrentReading() { - const [chapter, setChapter] = useState(null); - const [volume, setVolume] = useState(null); +function get_current_info(title) { + let req = {}; useEffect(() => { - setChapter(localStorage.getItem("chapter") || ""); - setVolume(localStorage.getItem("volume") || ""); - }); + const data = JSON.parse(localStorage.getItem("mangaData")); + data.watchHis.forEach((element) => { + if (element.title === title) { + req.chapter = element.chapter; + req.volume = element.volume; + } + }); + }, []); - return CR(chapter, volume); + return req || false; } -function CR(chapter, volume) { +export default function Current({ name: title }) { + let data = get_current_info(title); + if (!data) { + return; + } + return ( -
- {chapter && volume && ( -

- Reading: Vol {volume} Chapter {chapter} -

- )} -
+
+

{data.chapter}

+

{data.volume}

+
); } diff --git a/src/app/manga/[title]/[id]/[read]/download.jsx b/src/app/manga/[title]/[id]/[read]/download.jsx index b8af783..e7a20ee 100644 --- a/src/app/manga/[title]/[id]/[read]/download.jsx +++ b/src/app/manga/[title]/[id]/[read]/download.jsx @@ -1,5 +1,6 @@ +"use client"; + import styles from "./read.module.css"; -// import Link from "next/link"; export default function DownloadManga({ chapterId: id }) { return ( @@ -7,10 +8,13 @@ export default function DownloadManga({ chapterId: id }) { + alert( + "Downloads are not instant. It might take some time to prepare your file. Thank you for your patience" + ) + } > - + ); diff --git a/src/app/manga/[title]/[id]/[read]/page.jsx b/src/app/manga/[title]/[id]/[read]/page.jsx index 239a4d6..dbba6e0 100644 --- a/src/app/manga/[title]/[id]/[read]/page.jsx +++ b/src/app/manga/[title]/[id]/[read]/page.jsx @@ -1,7 +1,6 @@ import styles from "./read.module.css"; import Image from "next/image"; import DownloadManga from "./download"; -import CurrentReading from "./currentReading"; export default async function Read({ params }) { const chapterId = params.read; @@ -26,7 +25,6 @@ export default async function Read({ params }) { return (
-

Total pages: {images.length}

@@ -47,7 +45,6 @@ export default async function Read({ params }) {
))}
- ); } diff --git a/src/app/manga/[title]/[id]/[read]/read.module.css b/src/app/manga/[title]/[id]/[read]/read.module.css index 1d57d1c..420fff8 100644 --- a/src/app/manga/[title]/[id]/[read]/read.module.css +++ b/src/app/manga/[title]/[id]/[read]/read.module.css @@ -22,7 +22,7 @@ .ImageContainer p { text-align: center; color: white; - font-family: "Kanit"; + font-family: "Atkinson Hyperlegible", serif; font-size: 16px; margin: 5px; } @@ -30,7 +30,7 @@ .NotFound { text-align: center; color: white; - font-family: "Atkinson Hyperlegible"; + font-family: "Atkinson Hyperlegible", serif; font-size: 20px; } @@ -43,7 +43,7 @@ outline: none; border-radius: 5px; padding: 5px; - font-family: "Lato"; + font-family: "Atkinson Hyperlegible", serif; font-size: 16px; background-color: var(--light-green); cursor: pointer; @@ -53,13 +53,6 @@ background-color: var(--pastel-red); } -.CurrentReadingContainer { - text-align: center; - color: white; - font-family: "Quicksand"; - font-size: 18px; -} - @media screen and (max-width: 768px) { .ImageContainer img { width: 95%; diff --git a/src/app/manga/[title]/[id]/buttons.jsx b/src/app/manga/[title]/[id]/buttons.jsx index 19da1d3..4c11705 100644 --- a/src/app/manga/[title]/[id]/buttons.jsx +++ b/src/app/manga/[title]/[id]/buttons.jsx @@ -2,8 +2,21 @@ import styles from "./info.module.css"; import Link from "next/link"; +import { storeLocal } from "../../history/storeData"; export default function Buttons({ content: data }) { + function store_to_local(title, chapter, volume, image, id, id2) { + let data = { + title: title, + chapter: chapter, + volume: volume, + image: image, + id: id, + mangaId: id2, + }; + storeLocal(data); + } + return (
{data.chapters && @@ -15,9 +28,16 @@ export default function Buttons({ content: data }) { href={{ pathname: `/manga/info/read/${item.id}`, }} - onClick={() => - test(item.chapterNumber, item.volumeNumber) - } + onClick={() => { + store_to_local( + data.title.english || data.title.romaji, + parseInt(item.chapterNumber), + parseInt(item.volumeNumber), + data.image, + item.id, + data.id + ); + }} >
-

Chapters & Volumes diff --git a/src/app/manga/[title]/page.jsx b/src/app/manga/[title]/page.jsx index 0602ad9..589ff53 100644 --- a/src/app/manga/[title]/page.jsx +++ b/src/app/manga/[title]/page.jsx @@ -1,13 +1,16 @@ import styles from "./title.module.css"; import Image from "next/image"; import Link from "next/link"; +import { PreFetchMangaInfo } from "../cacher"; -// This page displays all the available mangas or manhwas when the user searches for one/ +// This page displays all the available mangas or manhwas when the user searches for one/ export default async function MangaInfo({ params }) { const title = params.title; const data = await GetSearchedAnime(title); + PreFetchMangaInfo(data); + return (

diff --git a/src/app/manga/[title]/title.module.css b/src/app/manga/[title]/title.module.css index 8a87422..e7842d5 100644 --- a/src/app/manga/[title]/title.module.css +++ b/src/app/manga/[title]/title.module.css @@ -11,7 +11,7 @@ .SearchedFor { color: white; text-align: center; - font-family: "Poppins"; + font-family: "Lexend Deca", serif; font-size: 26px; } @@ -42,10 +42,11 @@ .MangaInfo { color: white; margin-left: 20px; + font-family: "Atkinson Hyperlegible"; } .MangaTitle { - font-family: "Lato"; + font-family: "Lexend Deca", serif; margin: 0px; font-size: 22px; color: var(--neon-green); @@ -53,14 +54,18 @@ .MangaStatus { color: var(--soft-purple); + font-family: "Poppins", serif; + } .MangaVolume { color: #FFACAC; + font-family: "Poppins", serif; } .MangaChapters { - color: #FFEBB4 + color: #FFEBB4; + font-family: "Poppins", serif; } @media screen and (max-width: 768px) { -- cgit v1.2.3